<template>
  <div>
    <div class="video-box" v-if="videoLists && videoLists.length > 0">
      <div
        v-for="item in videoLists"
        :key="item.id"
        :class="['video', { active: item.text === curVideoActive }]"
        @click="clickVideoItem(item)"
      >
        <img v-if="item.state" src="@/assets/img/excavation/cameras.png" />
        <img v-else src="@/assets/img/excavation/cameras-error.png" />
        <div>{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    videoLists: {
      typeof: Array,
      default: () => []
    }
  },
  data() {
    return {
      curVideoActive: '',
      isVideo: false,
      name: '',
      status: '',
      videoLink: ''
    };
  },

  components: {
  },

  computed: {
  },

  mounted() {
  },

  methods: {
    // 点击监控按钮
    clickVideoItem(item) {
      console.log(item);
      const status = item.state === true ? '正常' : '异常';
      const { text } = item;
      const params = {
        isVideo: true,
        name: text,
        status
      };
      this.$store.commit('setData', { name: 'videoInfo', value: params });
    }
  }
};
</script>
<style scoped lang="scss">
.video-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
  width: 6.25rem;
  height: 14.375rem;
  .video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 6.25rem;
    height: 4.375rem;

    font-size: 0.75rem;

    color: $light2Grey;
    background-color: rgba(0,0,0,0.8);
    border-radius: 0.25rem;

    cursor: pointer;
    &.active {
      background-color: $itemActiveBg;
    }
    img {
      width: 1.875rem;
      height: 1.875rem;

      cursor: pointer;
    }
  }
}
</style>
